<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" href="/jQuery-Timepicker-Addon/1.6.3/css/jquery-ui-timepicker-addon.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/select2/css/select2.css"/>
    <link rel="stylesheet" href="/jqGrid/css/ui.jqgrid.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/<%= theme %>/jquery-ui.min.css"/>

    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.js"></script>
    <script type="text/javascript" src="/jqGrid/js/grid.locale-cn.js"></script>
    <script type="text/javascript" src="/jqGrid/js/jquery.jqGrid.js"></script>
    <script type="text/javascript" src="/select2/js/pinyin.min.js"></script>
    <script type="text/javascript" src="/select2/js/select2.full.js"></script>
    <script type="text/javascript" src="/select2/js/zh-CN.js"></script>
    <script type="text/javascript" src="/jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="/jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-zh-CN.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/jsNodeId.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: small;
        }

        html, body {
        / / overflow-x: hidden;
            -ms-overflow-style: scrollbar;
            height: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body class="ui-widget-content">
<div id="list_1" style="padding:5px;">
    <table id="list"></table>
    <div id="pager"></div>
</div>
<div id="salesSearch" style="display: none;overflow: visible;" title="信息提示">
    <form id="dialogForm" method="post" action="user/add">
        <table>
            <tr >
                <td>开始：</td>
                <td>
                    <input id="startTime" name="startTime" type="text" class="form-control ui-corner-all ui-widget ui-widget-content" />
                </td>
            </tr>
            <tr>
                <td>结束：</td>
                <td>
                    <input id="endTime" name="endTime" type="text" class="form-control ui-corner-all ui-widget ui-widget-content" />
                </td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
	$(window).resize(function () {
		$(window).unbind("onresize");
		$("#list").jqGrid('setGridWidth', $("#list_1").width());//.jqGrid('setGridHeight', winWh.WinH-86);
		$(window).bind("onresize", this);
	});
    $("#salesSearch").dialog({
        modal: true,
        autoOpen: false,
        title:'统计查询',
        overlay: {
            backgroundColor: '#000',
            opacity: 0.3
        },
        buttons:{
            "搜索":function(){
	            $("#salesSearch").dialog("close");
                var url = "/salesMonths/lists?startTime=" +  $("#startTime").datetimepicker('getDate') +
                    "&endTime=" +  $("#endTime").datetimepicker('getDate');
                $("#list_1 div").remove();
                $("#list_1").append("<table id='list'></table>");
                $("#list_1").append("<div id='pager'></div>");
                pageInit(url);
            },
            "取消": function() {
                $("#salesSearch").dialog("close");
            }
        }
    });
    $("#startTime").datetimepicker({
        dateFormat: "yy-mm-dd",
        showSecond: true,
        changeYear: true,
        changeMonth: true,
        timeFormat: 'HH:mm:ss',
        stepHour: 1,
        stepMinute: 1,
        stepSecond: 1
    });
    $("#startTime").datetimepicker('setDate', new Date());
    $("#endTime").datetimepicker({
        dateFormat: "yy-mm-dd",
        showSecond: true,
        changeYear: true,
        changeMonth: true,
        timeFormat: 'HH:mm:ss',
        stepHour: 1,
        stepMinute: 1,
        stepSecond: 1
    });
    $("#endTime").datetimepicker('setDate', new Date());
	function getGoodsOptions() {
		let data = {};
		runAjax('get', '/salesMonths/goods/lists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}

	function getShopNames() {
		let data = {};
		runAjax('get', '/salesMonths/shops/lists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}

	var goods = getGoodsOptions();
    function pageInit(url) {
        $("#list").jqGrid("jqPivot",
            url,
            {rowTotals: true,
	            rowTotalsText:"Sumary",
                colTotals: true,
                // footerTotals: true,
                footerAggregator: "sum",
                //totals: true,
                groupSummaryPos: "footer",
                frozenStaticCols:true,
                xDimension: [
                    {dataName: "gId", label: "品类",width:80, sortorder: "desc",summaryType: function() { return true;},summaryTpl: "小计:",
                        sortable:false,isGroupField :true,formatter:"select",editoptions: {
		                    value: getGoodsOptions()}},
                    { label: '店铺',dataName: 'sId',width:80, index: 'sId',editor: "text", formatter: "select",edittype: "select",
                        sortable:false,
                        editoptions: {
                            value: getShopNames(),
                            dataInit: function (elem) {
                                $(elem).select2({
                                    language: "zh-CN",
                                    dropdownParent: $(elem).parent(),
                                    placeholder: {
                                        id: '-1', // the value of the option
                                        text: '请选择一个选项'
                                    },
                                    allowClear: true,
                                    // theme: "classic",
                                });
                            }
                        }
                    }
                ],
                yDimension: [
                    /*{ dataName:"year", label: "年",converter: function(Value, xValues) {
                            return Value + '年';
                        }},*/
                    { dataName:"month",converter: function(Value, xValues) {
                            return Value + '月';
                        }},
                    { dataName:"week" ,converter: function(Value, xValues) {
                            var a = parseInt(Value % 10); // 个位数
                            var b = parseInt((Value % 100) / 10);  // 十位数
                            var c = parseInt((Value % 1000) / 100); // 百位数
                            return c + '' + b + '月' + '第' + a + '周';
                        }}
                ],
                aggregates: [
                    {member: "num", aggregator: "sum", summaryType: "sum", label: "销售量",sortable:false,search:false},
                    {member: "proceed", aggregator: "sum", summaryType: "sum", label: "营业额",sortable:false,search:false},
                    {member: "costs", aggregator: "sum", summaryType: "sum", label: "成本",sortable:false,search:false},
                    {member: "profits", aggregator: "sum", summaryType: "sum", label: "利润",sortable:false,search:false}
                ]
            },
            {// caption: "销售统计",
                shrinkToFit: false,
               //  width: "100%",
                autowidth: true,
	            height: 'auto',
                autoResizing: {compact: true},
                rowNum: 10,
                rowList: [10, 20, 100, "10000:All"],
                pager: "#pager",
                viewrecords: true,
                loadComplete: function (xhr) {
                    $("#list").navGrid("#pager", { search: false, add: false, edit: false, del: false, refresh: false }).
                    jqGrid('navButtonAdd', '#pager', { // sub un
                        caption: '',
                        title: '搜索',
                        onClickButton: function () {
                            $( "#salesSearch" ).dialog( "open" );
                        },
                    });
                }
            },
            {
                reader: function (obj) {
                    for (var i in obj.rows) {
                       // obj.rows[i].gId = goods[obj.rows[i].gId];
                        obj.rows[i].proceed = obj.rows[i].proceed.$numberDecimal;
                        var date = new Date(obj.rows[i].date);
                        obj.rows[i].year = date.getFullYear();
                        obj.rows[i].month = date.getMonth() + 1;
                        obj.rows[i].week = obj.rows[i].month +''+ weekIndexInMonth(date);
                        obj.rows[i].costs = obj.rows[i].num * obj.rows[i].cost.$numberDecimal;
                        obj.rows[i].profits = obj.rows[i].proceed - obj.rows[i].costs;
                    }
                    return obj.rows;
                }
            });
    }
	$(document).ready(function () {
		pageInit([]);
	});
</script>
</body>
</html>
